<template>
  <div class="home">
    <h1 class="title">欢迎使用 DayLog</h1>
    <p class="subtitle">简约风格的笔记软件</p>
    

    
    <div class="features">
      <div class="feature-card">
        <h3>代码笔记</h3>
        <p>记录和管理代码片段，支持多种编程语言</p>
        <router-link to="/code" class="btn btn-primary">开始使用</router-link>
      </div>
      
      <div class="feature-card">
        <h3>日记</h3>
        <p>记录日常生活，支持心情和天气标记</p>
        <router-link to="/diary" class="btn btn-primary">开始使用</router-link>
      </div>
      
      <div class="feature-card">
        <h3>待办事项</h3>
        <p>管理各种待办事项，支持自定义分类</p>
        <router-link to="/todo" class="btn btn-primary">开始使用</router-link>
      </div>
    </div>
    
    <div class="stats">
      <div class="stat-item">
        <span class="stat-number">{{ codeNotesCount }}</span>
        <span class="stat-label">代码笔记</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{ diaryNotesCount }}</span>
        <span class="stat-label">日记</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{ todoNotesCount }}</span>
        <span class="stat-label">待办事项</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useNoteStore } from '@/stores/noteStore';

const noteStore = useNoteStore();

const codeNotesCount = computed(() => noteStore.codeNotes.length);
const diaryNotesCount = computed(() => noteStore.diaryNotes.length);
const todoNotesCount = computed(() => noteStore.todoNotes.length);
</script>

<style lang="scss" scoped>
.home {
  text-align: center;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xxl;
  color: $primary-color;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-large;
  color: $text-light;
  margin-bottom: $spacing-xl;
}

.test-links {
  margin-bottom: $spacing-xl;
  padding: $spacing-lg;
  background-color: $secondary-color;
  border: $border-width solid $border-color;
  border-radius: $border-radius;
  
  h3 {
    color: $primary-color;
    margin-bottom: $spacing-md;
  }
  
  .link-buttons {
    display: flex;
    gap: $spacing-md;
    justify-content: center;
    flex-wrap: wrap;
    
    .btn {
      margin: 0;
    }
  }
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: $spacing-lg;
  margin-bottom: $spacing-xl;
  
  .feature-card {
    background-color: $secondary-color;
    border: $border-width solid $border-color;
    border-radius: $border-radius;
    padding: $spacing-lg;
    text-align: center;
    
    h3 {
      font-size: $font-size-xl;
      color: $primary-color;
      margin-bottom: $spacing-md;
    }
    
    p {
      color: $text-light;
      margin-bottom: $spacing-lg;
      line-height: 1.6;
    }
  }
}

.stats {
  display: flex;
  justify-content: center;
  gap: $spacing-xl;
  
  .stat-item {
    text-align: center;
    
    .stat-number {
      display: block;
      font-size: $font-size-xxl;
      font-weight: bold;
      color: $primary-color;
    }
    
    .stat-label {
      color: $text-light;
      font-size: $font-size-base;
    }
  }
  
  @media (max-width: $breakpoint-mobile) {
    flex-direction: column;
    gap: $spacing-lg;
  }
}
</style> 